<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      ::-webkit-scrollbar {
        width: 4px;
        height: 5px;
        background-color: #000;
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 30px;
        background-color: rgba(255, 255, 255, 0.5);
      }

      #tableWrapId {
        width: 100%;
        overflow: hidden;
        height: 100%;
        position: relative;
      }

      .demo {
        overflow: auto;
        margin: 0;
        height: 500px;
      }

      .table {
        display: block;
        border-spacing: 0;
        position: relative;
        padding: 0;
      }

      .thead tr th {
        border-right: 2px solid #ccc;
        width: 150px;
        height: 40px;
        font-weight: 100;
        background-color: #d8dadb;
      }

      tbody td {
        color: #000;
        border-bottom: 1px solid #ccc;
        padding: 0 0;
        width: 150px;
        text-align: center;
        height: 30px !important;
        border-right: 2px solid #ccc;
        font-size: 12px;
      }

      .thead th:first-child {
        width: 60px;
      }

      tbody td:first-child {
        width: 60px;
      }

      .thead th:nth-child(3) {
        width: 250px;
      }

      tbody td:nth-child(3) {
        width: 250px;
      }

      tbody tr td a {
        display: block;
        width: 70px;
        height: 25px;
        font-size: 12px;
        line-height: 25px;
        margin: auto;
        border: 1px solid #000;
        color: #666;
        text-decoration: none;
      }

      tbody tr td a:hover {
        border: 1px solid #18c2f9;
        color: #18c2f9;
      }

      tbody tr td input {
        width: 15px;
        height: 15px;
      }
    </style>

    <div id="tableWrapId">
      <div class="demo">
        <table id="table" cellspacing="0">
          <thead class="thead">
            <tr>
              <th></th>
              <th>操作</th>
              <th>任务名称</th>
              <th>任务完成标准</th>
              <th>任务开始时间</th>
              <th>任务要求完成时间</th>
              <th>任务负责人</th>
              <th>任务验收人</th>
              <th>完成进度</th>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr>
              <td>22</td>
              <td>33</td>
              <td>我的项目我做主，你们不用管</td>
              <td>23422342</td>
              <td>22</td>
              <td>33</td>
              <td>547547</td>
              <td>23422342</td>
              <td>22</td>
            </tr>
            <tr>
              <td>22</td>
              <td>33</td>
              <td>我的项目我做主，你们不用管</td>
              <td>23422342</td>
              <td>22</td>
              <td>33</td>
              <td>547547</td>
              <td>23422342</td>
              <td>22</td>
            </tr>
            <tr>
              <td>22</td>
              <td>33</td>
              <td>我的项目我做主，你们不用管</td>
              <td>23422342</td>
              <td>22</td>
              <td>33</td>
              <td>547547</td>
              <td>23422342</td>
              <td>22</td>
            </tr>
            <tr>
              <td>22</td>
              <td>33</td>
              <td>我的项目我做主，你们不用管</td>
              <td>23422342</td>
              <td>22</td>
              <td>33</td>
              <td>547547</td>
              <td>23422342</td>
              <td>22</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <script>
      window.onload = function () {
        var tableWrap = document.getElementById('tableWrapId')
        // 获取父节点的宽
        var tableWrapWidth = parseInt(getComputedStyle(tableWrap, null).width)
        // 获取table表格
        var tableDOM = document.getElementById('table')
        var TableWidth = 150 //表格的宽度
        // 初始化表格的宽
        function initTableWidth() {
          // 初始化表格和表格父元素的宽
          tableDOM.style.cssText =
            'width:' +
            TableWidth * tableDOM.rows[0].cells.length +
            'px;border-spacing:0;'
          var tableParentDOM = tableDOM.parentNode
          tableParentDOM.style.cssText = 'width:' + tableWrapWidth + 'px;'
        }

        initTableWidth()

        // var一个变量，以便以定义表格的长度
        var tableWidth = 0

        function getTableWidth() {
          // 初次查找table表格的长度
          tableWidth = parseInt(getComputedStyle(tableDOM, null).width)
          return tableWidth
        }
        // 变量，保存当前td盒子的一些数据
        var currentTDRef
        // 保存表格每个td宽的盒子
        var tableTDWidthList = []
        var currentTableWidth = getTableWidth()

        // 表格的拖拽事件
        function bindMouseEventForTableCell() {
          for (var i = 0; i < tableDOM.rows[0].cells.length; i++) {
            console.log(10086002, tableDOM.rows[0].cells[i])
            tableDOM.rows[0].cells[i].index = i
            tableDOM.rows[0].cells[i].onmousedown = function (event) {
              currentTDRef = this
              currentTDRef.isFoce = true
              currentTDRef.width = currentTDRef.offsetWidth
              currentTDRef.x = event.x
              currentTDRef.index = this.index
              if (currentTDRef.index == tableDOM.rows[0].cells.length - 1) {
                currentTDRef.isFoce = false
              }
              for (var j = 0; j < currentTDRef.parentNode.cells.length; j++) {
                tableTDWidthList.push(
                  parseInt(
                    getComputedStyle(currentTDRef.parentNode.cells[j], null).width
                  )
                )
              }
            }
            tableDOM.rows[0].cells[i].onmouseup = function (event) {
              if (currentTDRef == undefined) {
                currentTDRef = this
              }
              currentTDRef.isFoce = false
              tableTDWidthList = []
              currentTableWidth = getTableWidth()
            }
            tableDOM.rows[0].cells[i].onmousemove = function (event) {
              if (event.offsetX > this.offsetWidth - 5) {
                this.style.cursor = 'col-resize'
              } else {
                this.style.cursor = 'default'
              }
              if (currentTDRef == undefined) {
                currentTDRef = this
              }
              if (currentTDRef.isFoce) {

                const adjustWidth = event.clientX - currentTDRef.x

                console.log(10086001, { adjustWidth })

                var width = parseInt(currentTDRef.width) + adjustWidth
                var newTableWidth = parseInt(currentTableWidth) + adjustWidth
                tableDOM.style.cssText = 'width:' + newTableWidth + 'px;'
                currentTDRef.style.cssText = 'width:' + width + 'px;cursor:col-resize;'
                for (var j = 0; j < currentTDRef.parentNode.cells.length; j++) {
                  if (j !== currentTDRef.index) {
                    currentTDRef.parentNode.cells[j].style.cssText =
                      'width:' + tableTDWidthList[j] + 'px;'
                    updateTDWidth(currentTDRef, width)
                    if (currentTDRef.index !== 1 && currentTDRef.index !== 0) {
                      setElipsisOrShowAllTextContent(currentTDRef)
                    }
                  }
                }
              }
            }
          }
        }
        var tbody = document.getElementsByTagName('tbody')[0]
        function updateTDWidth(currentTDRef, width) {
          for (var i = 0; i < tbody.rows.length; i++) {
            tbody.rows[i].cells[currentTDRef.index].style.width = width + 'px'
          }
        }
        var data = [] //保存表格内容的盒子，以防数据丢失

        // 设置溢出...或者展示全部文本
        function setElipsisOrShowAllTextContent(currentTDRef) {
          var width = parseInt(getComputedStyle(currentTDRef, null).width)
          var canPutWordCount = parseInt(width / 12)
          for (var c = 0; c < tbody.rows.length; c++) {
            var text = tbody.rows[c].cells[currentTDRef.index].innerText
            var texTLength = text.length
            if (texTLength > canPutWordCount + 2) {
              tbody.rows[c].cells[currentTDRef.index].innerText =
                text.slice(0, canPutWordCount) + '...'
            } else {
              tbody.rows[c].cells[currentTDRef.index].innerText = data[c][currentTDRef.index]
            }
          }
        }

        // 记录单元格文本并设置溢出样式
        function recordCellTextAndSetOverflowStyle() {
          for (var outIndex = 0; outIndex < tbody.rows.length; outIndex++) {
            data[outIndex] = []
            for (var innerIndex = 2; innerIndex < tbody.rows[outIndex].cells.length; innerIndex++) {
              var cellInnterText = tbody.rows[outIndex].cells[innerIndex].innerText
              data[outIndex][innerIndex] = cellInnterText
            }
          }

          // 设置文本溢出...
          for (var i = 0; i < tbody.rows.length; i++) {
            for (var j = 2; j < tbody.rows[i].cells.length; j++) {
              var cellWidth = parseInt(
                getComputedStyle(tbody.rows[i].cells[j], null).width
              )
              var canPutWordCount = parseInt(cellWidth / 12)
              var text = tbody.rows[i].cells[j].innerText
              var texTLength = text.length
              if (texTLength >= canPutWordCount) {
                tbody.rows[i].cells[j].innerText = text.slice(0, canPutWordCount) + '...'
              }
            }
          }
        }
        recordCellTextAndSetOverflowStyle() //初次探测表格数据的方法
        bindMouseEventForTableCell() //表格拖拽效果的方法

        console.log(10086, { data })
      }
    </script>
  </body>
</html>
